<template>
    <li class="categories-menus-item">
        <a class="categories-menus-item-link" :href="link" >
            <div>
                <i class="ep icon-phone"></i>{{name}}<span v-show="tag!==''" class="tag"
                                                           :style="{backgroundColor:tagColor}">{{tag}}</span>
                <i class="ep icon-right-arrow"></i>
            </div>
        </a>
        <slot name="child-menus"></slot>
    </li>
</template>

<script>
    import Emitter from '../mixins/emitter';

    export default {
        name: "ep-category-menu",
        mixins:[
            Emitter
        ],
        props: {
            link: {
                type: String,
                default: "#",
            },
            name: {
                type: String,
                default: ""
            },
            tag: {
                type: String,
                default: ""
            },

            tagColor: {
                type: String,
                default: "#6aa84f"
            }
        },
        created(){

        },
        methods:{
            mouseover(e){
                // console.log(e.target)
                // console.log(e.currentTarget)
                //
                // if (e.target != e.currentTarget) {
                //     return;
                // }
                this.broadcast('ep-submenu','visible',true)
                this.$emit('submenu-show',true)
            },
            mouseout(e){
                // console.log(e.target)
                // console.log(e.currentTarget)
                //
                // if (e.target != e.currentTarget) {
                //     return;
                // }
                this.broadcast('ep-submenu','visible',false)
                this.$emit('submenu-show',false)
            }
        }
    }
</script>

<style lang="scss">
    .tag {
        color: #ffffff;
        display: inline-block;
        font-size: 10px;
        line-height: 13px;
        padding: 0 5px;
        margin: 0 5px;
        position: relative;
        top: -1px;
        font-weight: normal;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: 3px;
        box-sizing: border-box;

    }
</style>
